<template>
  <div class="app">

    <Category title="热门游戏列表">
      <ul>
        <li v-for="item in games" :key="item.id">
          {{item.name}}
        </li>
      </ul>
    </Category>

    <Category title="今日美食城市">
      <img :src="food" alt="">
    </Category>

    <Category title="今日影视推荐">
      <video :src="movie" controls></video>
    </Category>

    <Category title="未知"/>
  </div>
</template>

<script>
  import Category from './components/Category.vue'
  export default {
    name:'App',
    components:{Category},
    data() {
      return {
        games:[
          {id:'12r65r6201',name:'英雄联盟'},
          {id:'12r65r6202',name:'穿越火线'},
          {id:'12r65r6203',name:'原神'},
          {id:'12r65r6204',name:'我的世界'},
        ],
        food:'http://49.232.112.44/images/food.jpg',
        movie:'http://49.232.112.44/video/movie.mp4'
      }
    },
  }
</script>

<style>
  .app {
    background-color: gray;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 20px;
    display: flex;
    justify-content: space-evenly;
  }
</style>